<script setup>
import { ref } from 'vue'
import { Calendar, Search } from '@element-plus/icons-vue'
import { objectEntries } from '@antfu/utils'
// 消息内容模块
defineProps({
	listData: {
		default: {}
	},
	page: {},
	size: {}
})
const nowIndex = ref()
const showPhone = ref(false)
const welcomeInput = ref()
const emits = defineEmits(['showEdit'])

const goEdit = () => {
	emits('shownewadd')
}
const checkAllFun = (index) => {
	console.log(index)
	nowIndex.value = index
	showPhone.value = true
	// console.log(listData)
}
</script>

<template>
	<div class="tableStyle">
		<el-table
			:data="listData.item"
			style="width: 100%; border-radius: 10px"
			:header-cell-style="{ color: '#909399', fontSize: '14px', backgroundColor: '#F7F9FA', padding: '10px 0' }"
			:cell-style="{ fontSize: '14px', padding: '20px 0' }"
		>
			<el-table-column prop="Messagecontent" label="消息内容" width="340">
				<template #default="scope">
					<div class="message-text">
						<p style="color: #409eff">[共{{ scope.row.adjunct_data.length + 1 }}条]</p>
						<p>{{ scope.row.content }}</p>
					</div>
					<div class="message-list" v-for="(items, index) in scope.row.adjunct_data.slice(0, 1)">
						<div class="message-imgAndXcx" v-if="items.type == 1">
							<img :src="items.url" />
							<span>{{ items.title }}</span>
						</div>
						<div class="message-link" v-if="items.type == 2">
							<img :src="items.link_picurl" />
							<div class="message-link-info">
								<b>{{ items.link_title }}</b>
								<span>{{ items.link_desc }}</span>
							</div>
							<span>{{ items.title }}</span>
						</div>
						<div class="message-imgAndXcx" v-if="items.type == 3">
							<img :src="items.miniprogram_imgurl" />
							<span>{{ items.miniprogram_title }}</span>
						</div>
					</div>
					<p
						v-if="scope.row.adjunct_data.length > 1"
						style="color: #409eff; cursor: pointer; width: 60px"
						@click="checkAllFun(scope.$index)"
					>
						查看全部
					</p>
				</template>
			</el-table-column>
			<el-table-column prop="createdBy" label="使用成员" width="340">
				<template #default="scope">
					<div
						class="app-words-box"
						style="margin-left: 5px; margin-bottom: 5px; padding: 2px 10px 3px 5px; border-radius: 2px"
						v-for="items in scope.row.staff_info"
					>
						<div class="app-flex-left">
							<MyIcon class="app-down-icon primary-font" name="Person" />
							<span class="app-gap-words-left-xs">{{ items.name }}</span>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="update_time" label="修改时间" />
			<el-table-column prop="create_time" label="创建时间" />
			<el-table-column prop="operation" label="操作" width="150">
				<template #default="scope">
					<ul class="tableOperation">
						<li @click="emits('showEdit', scope.row.id)">编辑</li>
						<li @click="emits('deleteFun', scope.row.id)">删除</li>
					</ul>
				</template>
			</el-table-column>
		</el-table>
	</div>
	<div class="phone-container" v-if="showPhone">
		<div class="phone-content">
			<svg
				@click="showPhone = false"
				t="1662608652615"
				class="icon close-phone"
				viewBox="0 0 1024 1024"
				version="1.1"
				xmlns="http://www.w3.org/2000/svg"
				p-id="6651"
				width="40"
				height="40"
			>
				<path
					d="M512 128C300.8 128 128 300.8 128 512s172.8 384 384 384 384-172.8 384-384S723.2 128 512 128zM512 832c-179.2 0-320-140.8-320-320s140.8-320 320-320 320 140.8 320 320S691.2 832 512 832z"
					p-id="6652"
					fill="#eee"
				></path>
				<path
					d="M672 352c-12.8-12.8-32-12.8-44.8 0L512 467.2 396.8 352C384 339.2 364.8 339.2 352 352S339.2 384 352 396.8L467.2 512 352 627.2c-12.8 12.8-12.8 32 0 44.8s32 12.8 44.8 0L512 556.8l115.2 115.2c12.8 12.8 32 12.8 44.8 0s12.8-32 0-44.8L556.8 512l115.2-115.2C684.8 384 684.8 364.8 672 352z"
					p-id="6653"
					fill="#eee"
				></path>
			</svg>
			<div class="phone-list">
				<!-- text -->
				<div class="phone-msgText-container">
					<img src="../../../../assets/avatar.png" class="phone-msgAvatar" />
					<div class="phone-msgText">
						<p>欢迎语1</p>
					</div>
				</div>
				<div v-for="item in listData.item[nowIndex].adjunct_data">
					<!-- img -->
					<div class="phone-msgImg-container" v-show="item.type == 1">
						<img src="../../../../assets/avatar.png" class="phone-msgAvatar" />
						<img :src="item.url" class="phone-msgImg" />
					</div>
					<!-- link -->
					<div class="phone-msgLink-container" v-show="item.type == 2">
						<img src="../../../../assets/avatar.png" class="phone-msgAvatar" />
						<div class="phone-msgLink">
							<p>欢迎语1</p>
							<div class="phone-msgLink-info">
								<span>欢迎语1欢迎语1欢迎语1欢迎语1</span>
								<img :src="item.link_picurl" />
							</div>
						</div>
					</div>
					<!-- xcx -->
					<div class="phone-msgXcx-container" v-show="item.type == 3">
						<img src="../../../../assets/avatar.png" class="phone-msgAvatar" />
						<div class="phone-msgXcx-content">
							<div class="phone-msgXcx-header">
								<svg
									t="1662608270061"
									class="icon"
									viewBox="0 0 1024 1024"
									version="1.1"
									xmlns="http://www.w3.org/2000/svg"
									p-id="5599"
									width="14"
									height="14"
								>
									<path
										d="M512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0z m256.717 460.186a151.962 151.962 0 0 1-87.347 65.74 83.251 83.251 0 0 1-24.474 4.096 29.082 29.082 0 0 1 0-58.163 15.667 15.667 0 0 0 6.451-1.229 91.443 91.443 0 0 0 55.91-40.96 75.264 75.264 0 0 0 11.06-39.628c0-45.978-42.496-83.866-94.31-83.866a105.267 105.267 0 0 0-51.2 13.414 81.92 81.92 0 0 0-43.725 70.452v244.224a138.445 138.445 0 0 1-72.704 120.422 159.642 159.642 0 0 1-79.77 20.48c-84.378 0-153.6-63.488-153.6-142.029a136.192 136.192 0 0 1 19.763-69.837 151.962 151.962 0 0 1 87.347-65.74 85.914 85.914 0 0 1 24.474-4.096 29.082 29.082 0 1 1 0 58.163 15.667 15.667 0 0 0-6.451 1.229 95.949 95.949 0 0 0-55.91 40.96 75.264 75.264 0 0 0-11.06 39.628c0 45.978 42.496 83.866 94.925 83.866a105.267 105.267 0 0 0 51.2-13.414 81.92 81.92 0 0 0 43.622-70.452V390.35a138.752 138.752 0 0 1 72.807-120.525 151.245 151.245 0 0 1 79.155-21.504c84.378 0 153.6 63.488 153.6 142.029a136.192 136.192 0 0 1-19.763 69.837z"
										p-id="5600"
										fill="#696ee2"
									></path>
								</svg>
								<span>{{ item.miniprogram_title }}</span>
							</div>
							<img :src="item.miniprogram_imgurl" class="phone-msgXcx-pic" />
							<div class="phone-msgXcx-footer">
								<svg
									t="1662608236157"
									class="icon"
									viewBox="0 0 1024 1024"
									version="1.1"
									xmlns="http://www.w3.org/2000/svg"
									p-id="2385"
									width="16"
									height="16"
								>
									<path
										d="M512 128c-211.7 0-384 172.3-384 384s172.3 384 384 384 384-172.3 384-384-172.3-384-384-384z m0 717.4c-183.8 0-333.4-149.6-333.4-333.4S328.2 178.6 512 178.6 845.4 328.2 845.4 512 695.8 845.4 512 845.4z"
										p-id="2386"
										fill="#8a8a8a"
									></path>
									<path
										d="M702.9 334.9c-24.9-14.2-54.6-17.1-81.6-8.1-26.4 8.8-48 28.3-59.5 53.6L418 618.9l-1.6 3c-5.6 12.9-16.5 22.9-29.8 27.4-13.5 4.5-27.9 3.1-40.5-4.1-19.8-11.3-29.4-35.4-22.7-57.2 7.1-23 28.3-26.5 75.1-29l3.5-0.2c14-0.8 24.7-12.7 23.9-26.6-0.8-14-12.7-24.6-26.6-23.9l-3.4 0.2c-45.7 2.4-102.6 5.5-120.8 64.7-13.6 44.3 5.7 93.1 46 116 15.4 8.8 32.7 13.3 50 13.3 10.7 0 21.3-1.7 31.6-5.1 26.4-8.8 48-28.3 59.5-53.6L606 405.1l1.6-3c5.6-12.9 16.5-22.9 29.8-27.4 13.5-4.5 27.9-3.1 40.5 4.1 19.8 11.3 29.4 35.4 22.7 57.2-7.1 23.2-28.5 26.6-75.7 29.1l-2.8 0.1c-14 0.7-24.7 12.6-24 26.6 0.7 14 12.6 24.8 26.6 24l2.8-0.1c46-2.4 103.2-5.3 121.5-64.7 13.5-44.4-5.8-93.2-46.1-116.1z"
										p-id="2387"
										fill="#8a8a8a"
									></path>
								</svg>
								<span>小程序</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<style scoped>
.phone-container {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.35);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}
.phone-content {
	width: 274px;
	height: 535px;
	background: url(../../../../assets/phoneBg.png) no-repeat center center / cover;
	position: relative;
}
.close-phone {
	position: absolute;
	right: -25px;
	top: -10px;
	cursor: pointer;
}
.phone-list {
	position: absolute;
	top: 96px;
	left: 20px;
	right: 20px;
	bottom: 95px;
	overflow-x: hidden;
	overflow-y: auto;
	font-size: 14px;
	padding: 5px 10px;
}
.phone-list::-webkit-scrollbar {
	display: none;
}
.phone-msgText-container {
	display: flex;
	margin-bottom: 10px;
}
.phone-msgAvatar {
	width: 26px;
	height: 26px;
	margin-right: 10px;
}
.phone-msgText {
	width: 148px;
	border-radius: 4px;
	background: #fff;
	padding: 8px 13px;
	word-break: break-all;
	white-space: pre-wrap;
}
.phone-msgText p {
	color: rgba(0, 0, 0, 0.65);
}
.phone-msgImg-container {
	display: flex;
	margin-bottom: 10px;
}
.phone-msgImg {
	width: 140px;
	height: 140px;
	border-radius: 4px;
}
.phone-msgLink-container {
	display: flex;
	margin-bottom: 10px;
}

.phone-msgLink {
	display: flex;
	flex-direction: column;
	border-radius: 4px;
	background: #fff;
	padding: 8px 13px;
	width: 168px;
	box-sizing: border-box;
}
.phone-msgLink p {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	word-break: break-all;
	font-size: 12px;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.84);
	width: unset !important;
	text-align: left;
}
.phone-msgLink-info {
	display: flex;
	align-items: center;
}
.phone-msgLink-info span {
	-webkit-box-flex: 1;
	flex: 1;
	overflow: hidden;
	word-break: break-all;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	height: 35px;
	font-size: 12px;
	color: rgba(0, 0, 0, 0.64);
}
.phone-msgLink-info img {
	width: 40px;
	height: 40px;
}
.phone-msgXcx-container {
	display: flex;
	margin-bottom: 10px;
}
.phone-msgXcx-content {
	background: #fff;
	padding: 8px 13px;
	display: flex;
	flex-direction: column;
}
.phone-msgXcx-header {
	display: flex;
	align-items: center;
	margin-bottom: 3px;
}
.phone-msgXcx-pic {
	width: 126px;
	height: 126px;
	margin-bottom: 3px;
}
.phone-msgXcx-header span {
	flex: 1;
	color: rgba(0, 0, 0, 0.45);
	font-size: 12px;
	margin-left: 3px;
}
.phone-msgXcx-footer {
	display: flex;
	align-items: center;
}
.phone-msgXcx-footer span {
	flex: 1;
	color: rgba(0, 0, 0, 0.45);
	font-size: 12px;
}

/* other */
.CMtopStyleChildOne {
	display: flex;
	margin: 20px 20px 0 20px;
	justify-content: space-between;
}
.tableStyle {
	margin: 20px 20px 0 20px;
}
.public-container {
	margin: 20px 20px 0 20px;
	background: #fff;
	padding: 20px 20px 60px 20px;
	border-radius: 10px;
}
.tableHeader {
	height: 40px;
	font-size: 14px;
	color: #909399;
	background: #f7f9fa;
}
.tableOperation {
	display: flex;
	align-items: center;
	list-style: none;
	padding: 0;
	margin: 0;
}
.tableOperation li {
	font-size: 14px;
	color: #409eff;
	border-right: 1px solid #ebebeb;
	padding: 0 10px;
	height: 14px;
	line-height: 14px;
	cursor: pointer;
}
.tableOperation li:hover {
	color: #a0cfff;
}
.tableOperation li:first-child {
	padding-left: 0;
}
.tableOperation li:last-child {
	border-right: none;
}
/* table */
.message-text {
}
.message-text p {
}

.message-list {
}
.message-list img {
	width: 60px;
	height: 60px;
	display: block;
	margin-right: 8px;
	box-sizing: border-box;
}
.message-imgAndXcx {
	display: flex;
	align-items: center;
}
.message-imgAndXcx span {
	font-size: 13px;
	color: rgba(0, 0, 0, 0.85);
}
.message-link {
	display: flex;
	align-items: center;
}
.message-link-info {
	display: flex;
	align-items: center;
	flex-direction: column;
	height: 45px;
	box-sizing: border-box;
}
.message-link-info b {
	font-size: 13px;
	color: rgba(0, 0, 0, 0.85);
	font-weight: 400;
	margin-bottom: 2px;
}
.message-link-info span {
	font-size: 13px;
	color: rgba(0, 0, 0, 0.65);
}
</style>
